<template>
	<div style="position: relative">
		<bread-crumb class="bread-crumb-padding" :list="breadCrumb" :user="true"></bread-crumb>
		<div v-if="dataInfo.isOutside === 1" class="tips-area" style="margin-bottom: 20px">
			温馨提示：该域名为外部域名，根据域名实名政策要求，如本站的合作商需要实名的，北京荟米会将您的实名材料提交到合作商平台由合作商提交实名。
			您提交的管理操作均视为您同意授权我司代为操作，请知悉！
		</div>
		<div class="top-area">
			<div class="area-title">
				{{dataInfo.domainName}} 域名基本信息
			</div>
			<div class="area-row">
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
							注册时间：
						</div>
						<div class="area-cell-content">
							{{ dataInfo.registrationTime }}
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							到期时间：
						</div>
						<div class="area-cell-content">
							{{ dataInfo.expireTime }}
              <span class="day" v-if="dataInfo.days > 0"> 还剩{{dataInfo.days}}天 </span>
              <span class="day" v-else> 已到期 </span>
						</div>
					</div>
<!--					<div class="area-cell">
						<div class="area-cell-label">
							续费价格：
						</div>
						<div class="area-cell-content">
							99元/年 <div class="o-form-font-button" @click="renew">续费</div>
						</div>
					</div>-->
					<div class="area-cell">
						<div class="area-cell-label">
							自动续费：
						</div>
						<div class="area-cell-content">
							<i-switch @mousedown.native="changeAutoRenew" v-model="dataInfo.isAutoRenew" :true-value="1" :false-value="0" size="large"></i-switch>
						</div>
					</div>
				</div>
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
              &nbsp;&nbsp;&nbsp;持有人：
						</div>
						<div class="area-cell-content">
							<div >{{dataInfo.owner && dataInfo.owner !== '' ? dataInfo.owner : '-'}}</div>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							域名证书：
						</div>
						<div class="area-cell-content">
							<div class="o-form-font-button" @click="showModal">查看</div>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							域名备注：
						</div>
						<div class="area-cell-content">
							<div class="remark-flex" v-if="isEdit">
								<Input v-model="dataInfo.remark" style="width: 200px;"></Input>
								<div @click="editRemark" class="o-form-font-button m-l-10">保存</div>
							</div>
							<div class="remark-flex" v-else>
								<span class="m-r-10">{{dataInfo.remark}}</span>
								<div @click="isEdit = true" class="o-form-font-button">修改
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="area-right">
					<div class="area-label">状态</div>
					<div class="area-status"><span v-html="$options.filters.filterStatus(dataInfo.status)"></span> <span>|</span> <span v-html="$options.filters.filterTradingStatus(dataInfo.tradingStatus, dataInfo)"></span></div>
					<div class="area-query">
						<div class="o-form-font-button m-r-10" @click="toWhois(dataInfo.domainName)">whois查询</div>
						<div class="o-form-font-button " @click="toBaidu(dataInfo.domainName)">Baidu查询</div>
					</div>
				</div>
			</div>
		</div>
		<div class="top-area">
			<div class="area-title">
				高级功能
			</div>
			<div class="area-row area-high-row">
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
							域名模版：
						</div>
						<div class="area-cell-content">
							{{dataInfo.tmplateName && dataInfo.tmplateName !== '' ? dataInfo.tmplateName : '-'}}
						</div>
						<div class="area-cell-right">
							<div class="o-form-font-button" @click="goTransfer">过户</div>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							DNS设置：
						</div>
						<div class="area-cell-content">
							{{dataInfo.dnsAddr && dataInfo.dnsAddr !== '' ? dataInfo.dnsAddr : '-'}}
						</div>
						<div class="area-cell-right">
							<div class="o-form-font-button" @click="toDns">设置</div>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							是否出售：
						</div>
						<div class="area-cell-content">
							{{dataInfo.isSale === 2 ? '已上价' : dataInfo.isSale === 1 ? '未上架' : '禁止上架'}}
						</div>
						<div class="area-cell-right" v-if="dataInfo.isSale === 1">
							<div class="o-form-font-button" @click="toFix">一口价</div>
						</div>
					</div>
				</div>
				<div class="area-col">
					<div class="area-cell">
						<div class="area-cell-label">
							原注册商：
						</div>
						<div class="area-cell-content">
							{{dataInfo.isOutside === 1 ? '外部' : '190'}}
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							域名解析：
						</div>
						<div class="area-cell-content">
							{{dataInfo.resolutionCount}}条
						</div>
						<div class="area-cell-right">
							<div class="o-form-font-button" @click="toAnalysis">添加</div>
						</div>
					</div>
					<div class="area-cell">
						<div class="area-cell-label">
							域名转移：
						</div>
						<div class="area-cell-content">
							<div class="o-form-font-button m-r-10" @click="toPush">域名PUSH</div>
							<div class="o-form-font-button" @click="toOut">转出190</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="top-area">
			<div class="area-title">
				操作日志
			</div>
			<div class="table-box">
				<table class="table-area">
					<thead>
						<tr>
              <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
							<th>
								<div class="line-style">操作类型</div>
							</th>
              <th>
                <div class="line-style">操作时间</div>
              </th>
							<th>
								<div class="line-style">操作信息</div>
							</th>
						</tr>
					</thead>
					<tbody>
            <tr v-if="tableData.list.length === 0">
              <td colspan="4">
                <div class="line-style" style="justify-content: center;">
                    <span class="normal-f">
                      暂无数据
                    </span>
                </div>
              </td>
            </tr>
            <tr v-else v-for="(item, index) in tableData.list" :key="item.id">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f">{{
                      (page - 1) * pageSize + index + 1
                    }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">
                    {{item.typeStr }}
                  </span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.createdTime }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.remark }}</span>
                </div>
              </td>
            </tr>
					</tbody>
				</table>
				<div class="form-page-bottom-area flx-row-c-c">
					<Page :total="tableData.total" :current="page" :page-size="pageSize" :page-size-opts="pageSizeOpts"
						@on-change="pageChange" @on-page-size-change="pageSizeChange" show-elevator show-sizer
						show-total />
				</div>
			</div>
		</div>

		<!-- 证书预览 -->
		<Modal v-model="showImage" draggable sticky :mask="false" :width="900" footer-hide title="预览证书">
			<div class="content">
				<img :src="this.image" alt="" srcset="" />
			</div>
			<div class="modal-btn">
				<div class="btn-download" @click="download">下载证书</div>
			</div>
		</Modal>
		<!-- 域名状态 -->
		<Modal v-model="showDomainStatus" draggable sticky :mask="false" :width="900" footer-hide title="域名状态">
			<div>
				<div class="row-from" style="padding-top: 0px">
					<div class="row-item">
						<div class="row-name">域名状态码:</div>
						<div class="row-value" style="
                text-align: center;
                color: rgba(61, 61, 61, 0.85);
                font-weight: bold;
              ">
							域名状态描述
						</div>
					</div>
				</div>
				<div class="content status">
					<div class="row-from" style="padding-top: 0px">
						<div class="row-item" v-for="item in dataInfo.domainStatusCaptionList" :key="item.name">
							<div class="row-name">{{ item.name }}</div>
							<div class="row-value">{{ item.desc }}</div>
						</div>
					</div>
				</div>
			</div>
			<div class="modal-btn">
				<div class="btn-download" @click="showDomainStatus = false">关闭</div>
			</div>
		</Modal>
		<Lodding :loading="loading" />
    <submitAutoRenewModal
        ref="submitAutoRenewModal"
        title="操作验证"
        :show.sync="submitAutoRenewModalShow"
        @confirm="submitAutoRenewConfirm"
    />
	</div>
</template>

<script>
	import {changelocation} from "@/utils/location";
	import {getDomainInfoById, getDownloadDomainPicById, autoRenew, setRemark, getDomainLogs} from "@/api/bidding";
	import {addToShoppingCart} from "@/api/user";
	import Lodding from "_c/spin/loading";
	export default {
		name: "dnDetail",
		components: {
			Lodding,
      submitAutoRenewModal: () => import("_c/modal/renewResultModal/submitAutoRenewModal"),
		},
    filters: {
      filterStatus(val) {
        if (val === 0) {
          return '<span style="color: #749a19">正常</span>'
        } else if (val === 1) {
          return '<span style="color: #616161">锁定</span>'
        } else if (val === 2) {
          return '<span style="color: #616161">转出中</span>'
        } else if (val === 3) {
          return '<span style="color: #fbc02d">即将到期</span>'
        } else if (val === 4) {
          return '<span style="color: #ff3838">续费期</span>'
        } else if (val === 5) {
          return '<span style="color: #ff3838">赎回期</span>'
        } else if (val === 6) {
          return '<span style="color: #ff3838">赎回中</span>'
        }
      },
      filterTradingStatus(val, dataInfo) {
        if (val === 0) {
          if(dataInfo.isPush === 0 || dataInfo.isLock === 1 || !(dataInfo.auditType !== 1 || dataInfo.auditStatus === 2)) {
            return '<span style="color: #b0bec5">限制中</span>'
          } else {
            return '<span style="color: #749a19">可交易</span>'
          }
        } else if (val === 1) {
          return '<span style="color: #00acc1">出售中</span>'
        } else if (val === 2) {
          return '<span style="color: #00acc1">PUSH中</span>'
        } else if (val === 3) {
          return '<span style="color: #00acc1">转出中</span>'
        } else if (val === 3) {
          return '<span style="color: #00acc1">预删除中</span>'
        }
      }
    },
		data() {
			return {
				breadCrumb: [{name: "管理中心"},{name: "我的域名"}, {name: "域名详情"}],
				tablist: [{
					name: "域名信息",
					to: "/user/successbop",
				}, ],
				colorType: 0,
				dataInfo: {},
				showImage: false,
				image: "",
				loading: false,
				showDomainStatus: false,
				isOutside: 0,
				isEdit: false,
				pageSizeOpts: [50, 100, 200],
				pageSize: 50,
				page: 1,
				tableData: {
          total: 0,
          list: []
        },
        submitAutoRenewModalShow: false,
        autoRenewForm: {
          ids: [],
          type: null,
          code: null
        }
			};
		},
		mounted() {
			this.domainId = this.$route.params.domainId;
			this.title = this.$route.params.title;
      this.pageSize = 50
      this.page = 1
			this.retquestDomainInfoById();
			this.getLogs();
		},
		methods: {
      async getLogs() {
        let res = await getDomainLogs({
          domainId: this.domainId,
          page: this.page,
          limit: this.pageSize
        })
        if (res.result) {
          this.tableData = {
            total: res.data.total,
            list: res.data.list
          }
        }
      },
      async editRemark() {
        if (!this.dataInfo.remark || this.dataInfo.remark === '') {
          return this.$Modal.warning("域名备注不能为空");
        }
        let res = await setRemark({
          remark: this.dataInfo.remark,
          domainIds: [this.dataInfo.id]
        });
        if (res.result) {
          this.$Message.success("设置成功！");
          this.isEdit = false
        }
      },
      // 自动续费获取验证码成功
      async submitAutoRenewConfirm(value) {
        this.autoRenewForm.code = value
        const res = await autoRenew(this.autoRenewForm);
        if (res.code === 200) {
          if (res.data.length === 0) {
            this.$Message.success("操作成功！");
            this.dataInfo.isAutoRenew =  this.autoRenewForm.type
          }
        }
        this.$refs.submitAutoRenewModal.cancel();
      },
      submitAutoRenewCancel() {

      },
      changeAutoRenew() {
        return new Promise((resolve) => {
          this.submitAutoRenewModalShow = true
          this.autoRenewForm = {
            ids: [this.dataInfo.id],
            type: this.dataInfo.isAutoRenew === 1 ? 0 : 1,
            code: null
          }
          resolve();
        });
      },
      toWhois(domainName) {
        window.open(`/search?type=1&domainName=${domainName}`)
      },
      toBaidu(domainName) {
        window.open(`https://www.baidu.com/s?wd=${domainName}`)
      },
			async retquestDomainInfoById() {
				this.loading = true;
				const {
					code,
					data
				} = await getDomainInfoById({
					domainId: this.domainId,
				});
				this.loading = false;
				code === 200 && data && (this.dataInfo = data);
			},
			domainStatusClick() {
				this.showDomainStatus = true;
			},
			showModal() {
				if (this.image) {
					this.showImage = true;
					this.loading = false;
					return false;
				}
				this.retquestDownloadDomainPicById(true);
			},
			async retquestDownloadDomainPicById(isShow = false) {
				this.loading = true;
				const {
					code,
					data,
					message
				} = await getDownloadDomainPicById({
					domainId: this.domainId,
				});
				this.loading = false;
				if (code === 200) {
					this.image = data;
					isShow && (this.showImage = true);
				} else {
					this.$Message.warning(message);
				}
			},
			async downloadEvent() {
				if (!this.image) {
					await this.retquestDownloadDomainPicById();
				}
				this.download();
			},
			dataURLtoBlob(dataurl) {
				var arr = dataurl.split(","),
					mime = arr[0].match(/:(.*?);/)[1],
					bstr = atob(arr[1]),
					n = bstr.length,
					u8arr = new Uint8Array(n);
				while (n--) {
					u8arr[n] = bstr.charCodeAt(n);
				}
				return new Blob([u8arr], {
					type: mime
				});
			},
			download() {
				let data = this.dataURLtoBlob(this.image);
				let type = data.type.split("/")[1];
				let imageUrl = URL.createObjectURL(data);
				var a = document.createElement("a");
				a.setAttribute("href", imageUrl);
				a.setAttribute("download", `${this.title}证书信息.${type}`);
				a.setAttribute("target", "_blank");
				let clickEvent = document.createEvent("MouseEvents");
				clickEvent.initEvent("click", true, true);
				a.dispatchEvent(clickEvent);
			},
			async renew() {
				this.loading = true;
				let res = await addToShoppingCart({
					tradeNames: [this.title],
					type: 1,
				});
				if (res.code == 200) {
					this.$Message.success("添加成功！");
					setTimeout(() => {
						let url = changelocation("/pro");
						window.open(url);
					}, 1000);
				}
				this.loading = false;
			},
			// 模板过户
			goTransfer() {
				this.$router.push({
					name: "templatetransfer",
					params: {
						dnList: [this.dataInfo.domainName]
					},
				});
			},
      toDns() {
        this.$router.push({
          name: "batchDns",
          params: {
            dnList: [this.dataInfo.domainName]
          },
        });
      },
      toFix() {
        this.$router.push({
          name: "dnsell",
          params: {
            dnList: [this.dataInfo.domainName]
          },
        });
      },
      toPush() {
        this.$router.push({
          name: "dnpushform",
          params: {
            dnList: [this.dataInfo.domainName]
          },
        });
      },
      toOut() {
        this.$router.push({
          name: "transferoutform",
          params: {
            dnList: [this.dataInfo.domainName]
          },
        });
      },
      toAnalysis() {
        this.$router.push({
          path: `/user/mydn/batchAnalysis/${this.dataInfo.id}/${this.dataInfo.domainName}`,
        });
      },
			// 切换页码
			pageChange(page) {
				this.page = page;
        this.getLogs();
			},
			// 切换pageSize
			pageSizeChange(pageSize) {
				this.pageSize = pageSize;
        this.getLogs();
			}
		},
	};
</script>

<style lang="scss" scoped>
	.row-from {
		.row-item {
			display: flex;
			align-items: center;
			height: 50px;
			line-height: 50px;
			padding-left: 30px;

			.row-name {
				width: 130px;
				padding-right: 29px;
				box-sizing: border-box;

				font-size: 16px;
				color: #000;
			}

			.row-value {
				flex: 1;
				font-size: 16px;
				color: #000;
				font-weight: 400;

				// span {
				//   font-size: inherit;
				//   color: inherit;
				//   font-weight: inherit;
				// }
				.btn {
					display: inline-table;
					width: 137px;
					line-height: 28px;
					font-size: 14px;
					border-radius: 5px;
					text-align: center;
					height: 28px !important;
					color: #fff;
					cursor: pointer;
				}
			}
		}
	}

	.content {
		width: 100%;
		height: 70vh;
		text-align: center;
		overflow-y: auto;
	}

	.content.status {
		height: 60vh;
	}

	.modal-btn {
		border-top: 1px solid #f7f7f7;
		width: 100%;
		padding: 10px 0;
		display: flex;
		justify-content: center;

		.btn-download {
			width: 100px;
			height: 38px;
			text-align: center;
			line-height: 36px;
			border-radius: 5px;
			cursor: pointer;
			margin-right: 5px;
			font-size: 18px;
			color: #fff;
			background-color: #f9521f;
		}
	}


	.top-area {
		padding: 24px;
		border-radius: 0;
		background-color: #fff;
		margin-bottom: 20px;

		.area-title {
			font-size: 16px;
			font-weight: 600;
			text-align: left;
			color: #3D3D3D;
			position: relative;
			margin-bottom: 20px;
			line-height: 1;
		}
	}


	.area-row {
		display: flex;

		.area-col {
			min-width: 25%;
		}
	}

	.area-cell {
		line-height: 32px;
		display: flex;
	}

	.area-cell-label {
		font-size: 14px;
		color: #333;
	}

	.area-cell-content {
		font-size: 14px;
		color: #666;
		flex: 1;
		min-width: 0;
	}

	.area-cell-content .day {
		font-size: 12px;
	}


	.area-cell-content a {
		color: #F68A0C;
		margin-right: 10px;
	}

	.area-cell-right {
		min-width: 50px;
	}

	.area-cell-right a {
		color: #F68A0C;
		font-size: 14px;
	}


	.o-form-font-button {
		display: inline-block;
	}

	.o-form-font-button:hover {
		text-decoration: underline;
	}

	.area-right {
		margin-left: auto;
		text-align: right;
	}

	.area-label {
		font-size: 14px;
		color: #999;
		line-height: 32px;
	}

	.area-status {
		font-size: 20px;
		color: #4B9E52;
		line-height: 32px;
	}

	.area-query .o-form-font-button {
		font-size: 14px;
		color: #999;
		margin-left: 10px;
		line-height: 32px;
	}

	.area-query .o-form-font-button:hover {
		color: #F68A0C;
	}


	.area-status span {
		color: #333;
	}

	.area-high-row {
		justify-content: space-between;
	}

	.area-high-row .area-col {
		min-width: 29%;
	}

	.remark-flex {
		display: flex;
	}

	.remark-flex /deep/ .ivu-input-type-text .ivu-input {
		border-radius: 0;
		border-width: 0;
		border-bottom-width: 1px;
		line-height: 32px !important;
		height: 32px !important;
	}

	.m-r-10 {
		margin-right: 10px;
	}

	.m-l-10 {
		margin-left: 10px;
	}

	.ivu-switch-checked {
		border-color: #F68A0C;
		background-color: #F68A0C;
	}
  .ivu-switch:not(.ivu-switch-disabled):focus {
    box-shadow: none;
  }
</style>
